<template>
	<div class="span9 page_message">
	<section id="contents">
				<div class="tab-content">
			
			  
			<form action="http://www.weiphp.hk/index.php/weixin/no_answer/config/pbid/1" class="form-horizontal" method="post">
								<div class="form-group row">
					 <label class="col-sm-2"> 客服方式					</label> 					<div class="col-sm-8">

						
						
	
                        <div class="check-item"> <input type="radio" id="auto-0" class="regular-radio" name="data_type" value="0" checked="">

                        	<label for="auto-0"></label>
                        	<span>自动回复</span>
						</div> 


						
	
                        <div class="check-item"> <input type="radio" id="auto-1" class="regular-radio" name="data_type" value="1">

                        	<label for="auto-1"></label>
                        	<span>转微信人工回复</span>
						</div> 


											</div>
					
				</div>
								<div class="form-group row">
					 <label class="col-sm-2"> 回复内容					</label> 					<div id="material_stype" data-type="text"></div>
                   <div class="col-sm-8">
     
<div id="material_stype"></div>
<input type="hidden" value="text:1" name="stype" id="material_res_stype" data-type="" data-id="">
<div class="form-item cf material-block">
	<div class="controls">
		<div class="check-item">
			<input type="radio" name="material_stype_type" id="material_stype_text" value="text" class="regular-radio" onclick="changeOption()" checked="checked"> <label for="material_stype_text"></label>文本
		</div>
		<div class="check-item">
			<input type="radio" name="material_stype_type" id="material_stype_img" value="img" class="regular-radio" onclick="changeOption()"> <label for="material_stype_img"></label>
			图片
		</div>
		<div class="check-item">
			<input type="radio" name="material_stype_type" id="material_stype_news" value="news" class="regular-radio" onclick="changeOption()"> <label for="material_stype_news"></label>图文
		</div>
		<div class="check-item">
			<input type="radio" name="material_stype_type" id="material_stype_voice" value="voice" class="regular-radio" onclick="changeOption()"> <label for="material_stype_voice"></label>语音
		</div>
		<div class="check-item">
			<input type="radio" name="material_stype_type" id="material_stype_video" value="video" class="regular-radio" onclick="changeOption()"> <label for="material_stype_video"></label>视频
		</div>
	</div>

	<div class="form-item cf show showtext text_area my-3" id="text_area" style="width: 100%; display: block;">
		<input type="hidden" name="material_stype_text_id" value="1">
		<div class="text_material" id="text_material">
			<a class="select_text" href="javascript:;" onclick="$.WeiPHP.openSelectAppText('http://www.weiphp.hk/index.php/material/material/text_lists/isAjax/ajax/isRadio/1/pbid/1',selectTextCallback)" style="display: none;">选择文本</a>
			<div class="text_wrap">您好，这里是燊光科技，我是您的助手xiao燊，开心</div>
			<a class="delete ml-2 ml-2" href="javascript:;" style="left: 310px; display: inline;">删除</a>
		</div>
	</div>
	<div class="form-item cf show shownews appmsg_area" id="appmsg_area" style="width: 100%; display: none;">
		<input type="hidden" name="material_stype_news_id" value=""> <a class="select_appmsg" href="javascript:;" onclick="$.WeiPHP.openSelectAppMsg('http://www.weiphp.hk/index.php/material/material/material_data/isAjax/ajax/isRadio/1/pbid/1',selectAppMsgCallback)">选择图文</a>
		<div class="appmsg_wrap" style="height: auto;"></div>
		<a class="delete ml-2" href="javascript:;" style="left: 310px;">删除</a>
	</div>
	<div class="form-item cf show showimg image_area" id="image_area" style="width: 100%; display: none;">
		<input type="hidden" name="material_stype_img_id" value="">
		<a class="select_image image_material" href="javascript:;" onclick="$.WeiPHP.openSelectAppMsg('http://www.weiphp.hk/index.php/material/material/picture_data/isAjax/ajax/isRadio/1/pbid/1',selectImageCallback)">从素材库选择图片</a>
		<div class="image_wrap"></div>
		<a class="delete ml-2" href="javascript:;" style="left: 310px;">删除</a>
	</div>
	<div class="form-item cf show showvoice voice_area" id="voice_area" style="width: 100%; display: none;">
		<input type="hidden" name="material_stype_voice_id" value=""> <a class="voice_material select_voice" href="javascript:;" onclick="$.WeiPHP.openSelectAppMsg('http://www.weiphp.hk/index.php/material/material/voice_data/isAjax/ajax/isRadio/1/pbid/1',selectVoiceCallback,'选择语音素材')">选择语音素材</a>
		<div class="voice_wrap"></div>
		<a class="delete ml-2" href="javascript:;">删除</a>
	</div>
	<div class="form-item cf show showvideo video_area" id="video_area" style="width: 100%; display: none;">
		<input type="hidden" name="material_stype_video_id" value=""> <a class="voice_material select_video" href="javascript:;" onclick="$.WeiPHP.openSelectAppMsg('http://www.weiphp.hk/index.php/material/material/video_data/isAjax/ajax/isRadio/1/pbid/1',selectVideoCallback,'选择视频素材')">选择视频素材</a>
		<div class="video_wrap" style="float: left;"></div>
		<a class="delete ml-2" href="javascript:;" style="left: 230px;">删除</a>
	</div>
</div>
                  </div>

					
				</div>
				 				<div id="tips" class="offset-sm-2" style="display: none;">
					<p class="alert alert-warning">
						微信多客服系统地址：<a href="https://mpkf.weixin.qq.com">https://mpkf.weixin.qq.com</a>
					</p>
					<p class="alert alert-warning">
						具体使用教程：<a href="http://kf.qq.com/product/weixinmp.html#hid=121">http://kf.qq.com/product/weixinmp.html#hid=121</a>
					</p>
				</div>
				<input type="hidden" name="id" value="0" readonly="">
				<div class="row">
					<div class="offset-sm-2 col-sm-4"><button type="submit" class="btn submit-btn ajax-post" target-form="form-horizontal">确 定</button></div>
				</div>

			</form>
		</div>
	</section>
</div>
</template>

<script>
</script>

              	<style>
.image_material, .text_material, .voice_material, .video_material {
	display: block;
	border: 1px dashed #ddd;
	width: 308px;
	height: auto;
	background: #eee;
	text-align: center;
	color: #333;
	display: block;
	float: left;
	position: relative;
}

.image_material .select_image, .voice_material .select_voice,
	.video_material .select_video, .text_material .select_text {
	line-height: 196px;
	display: block;
	height: 200px;
}

#voice_area, #video_area, #image_area {
	position: relative;
}

#image_area .delete, #voice_area .delete, #video_area .delete,
	.text_material .delete {
	position: absolute;
	top: 1px;
	white-space: nowrap;
	display: none;
}

.appmsg_item {
	padding: 15px;
	width: 278px;
}



#image_area .image_wrap {
	border: 1px dashed #ddd;
	width: 308px;
	display: none;
}

.video_wrap, .voice_wrap {
	background: #fff;
}

.voice_wrap {
	width: 308px;
	float: left
}

.video_wrap {
	width: 222px;
}

.select_video, .select_voice, .select_image {
	height: 240px;
	line-height: 240px;
	cursor: pointer
}
.sound_item {
    min-height: 80px;
    padding: 10px;
    width: 100%;
}
.audio_name .colorless {
    display: block;
}


/* 选择类型文本换行 */
.text_wrap {
    padding: 15px;
    word-wrap: break-word;
    text-align: left;
}

.m-voice {
  height: 80px;
}
.picture_item {
    border: 0;
    background: #f9f9f9;
}

.picture_item .m-img {
  display: block;
  width: 60px;
  height: 60px;
  float: left;
  margin-right: 10px;
}
.sound_item .ctime {padding-top: 0;}
.material_list li {border:0;}
.picture_item .sound_item{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
.material_list img {
    max-width: initial;
}
.sound_item .icon_sound {
    position: static;
}
.picture_item .content{
    margin-left: 1em;
}
.picture_item .content{
    overflow: hidden;
    flex: 1;
}
.appmsg_dialog .material_list li {
    position: static!important;
    background: #f9f9f9;
    max-height: 300px;
}
.material_list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    height: auto;
}
</style>
